<template>
<div class="post-detail-page">
  <Modal
  :butText="{closeText: '取消', confirmText: '确定'}"
  :visible="modalIsVisible"
  title="删除文章"
  @modal-on-confirm="modalConfirm"
  @modal-on-close="modalIsVisible = false"
  >
    <p>确定要删除这篇文章吗？</p>
  </Modal>
  <article class="w-75 mx-auto mb-5 pb-3" v-if="postDetailData">
    <div class="rounded-lg img-fluid my-4">
      <img :src="postImage" alt="jpg" class="w-100">
    </div>
    <div>
      <h2 class="mb-4">{{postDetailData.title}}</h2>
    </div>
    <div class="user-profile-component border-top border-bottom py-3 mb-5 align-items-center row g-0">
      <div class="col">
        <UserProfile :user="postDetailData.author" v-if="typeof postDetailData.author === 'object'"></UserProfile>
      </div>
      <span class="text-muted col d-flex justify-content-end font-italic">发表于: {{postDetailData.createdAt}}</span>
    </div>
    <div v-html="postHTML"></div>
    <div class="btn-box mt-5" v-if="isUser">
      <router-link class="btn btn-success" :to="{ name: 'createPost', query: { id: postDetailData._id } }">编辑</router-link>
      <button class="btn btn-danger" @click.prevent="deleteBtnClick">删除</button>
    </div>
  </article>
</div>
</template>

<script lang="ts">
import { defineComponent, computed, onMounted, ref } from 'vue'
import { useStore } from 'vuex'
import { PostProps, ImageProps, GlobalDataProps, userProps, loaderResType } from '../store'
import { useRoute, useRouter } from 'vue-router'
import createMessage from './createMessage'
import UserProfile from './UserProfile.vue'
import MarkdownIt from 'markdown-it'
import Modal from './Modal.vue'

// 组件数据方法
const postDetailDataFunc = (id: string) => {
  const store = useStore<GlobalDataProps>()
  const md = new MarkdownIt() // markdown格式
  // 数据获取
  const postDetailData = computed<PostProps>(() => {
    return store.getters.getPostsDetailById(id)
  })
  // 内容处理
  const postHTML = computed(() => {
    if (postDetailData.value && postDetailData.value.content) {
      return md.render(postDetailData.value.content)
    } else {
      return ''
    }
  })
  // 图片处理
  const postImage = computed(() => {
    if (postDetailData.value && postDetailData.value.image) {
      const { image } = postDetailData.value
      return (image as ImageProps).url + '?x-oss-process=image/resize,w_850'
    } else {
      return null
    }
  })

  return { postDetailData, postHTML, postImage }
}

export default defineComponent({
  name: 'PostDetail',
  components: {
    UserProfile,
    Modal
  },
  setup () {
    const store = useStore<GlobalDataProps>()
    const route = useRoute()
    const router = useRouter()
    const id = route.params.id

    const modalIsVisible = ref(false)

    const modalConfirm = () => {
      modalIsVisible.value = false
      store.dispatch('deletePostDetail', id).then((rawData: loaderResType<PostProps>) => {
        createMessage('删除成功, 2秒后跳转到专栏首页', 'success', 2000)
        setTimeout(() => {
          router.push({ name: 'columnDetail', params: { id: rawData.data.column } })
        }, 2000)
      })
    }

    const deleteBtnClick = () => {
      modalIsVisible.value = true
    }

    onMounted(() => {
      store.dispatch('postDetailRst', id)
    })

    const { postDetailData, postHTML, postImage } = postDetailDataFunc(id as string)

    const isUser = computed(() => { // 通过id比较来确定是否是本用户，然后确认编辑和取消按钮的显示
      const { _id, isLogin } = store.state.user
      if (postDetailData.value && postDetailData.value.author && isLogin) {
        const userAuthor = postDetailData.value.author as userProps
        return userAuthor._id === _id
      } else {
        return false
      }
    })

    return { postDetailData, postImage, postHTML, isUser, modalIsVisible, modalConfirm, deleteBtnClick }
  }
})
</script>
